<!-- TableView14_10.vue 空状态的固定表头表格 -->
<template>
  <div class="table-demo">
    <h2>10. 添加表头固定功能,空状态的固定表头表格</h2>
    <p class="description">自定义空状态显示内容</p>
    <div class="table-container">
      <Table
        :data="[]"
        :columns="columns"
        fixed-header
        fixed-header-height="300px"
        empty-text="暂无数据"
      >
        <template #empty>
          <div class="empty-content">
            <i class="empty-icon">📭</i>
            <p class="empty-text">没有找到相关数据</p>
            <button class="reload-btn" @click="loadData">加载数据</button>
          </div>
        </template>
      </Table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

const columns = ref([
  { title: '姓名', dataIndex: 'name', width: '120px' },
  { title: '年龄', dataIndex: 'age', width: '80px' },
  { title: '城市', dataIndex: 'city', width: '120px' },
  { title: '会员等级', dataIndex: 'level', width: '120px' }
])

const loadData = () => {
  console.log('需编写，加载数据代码')
}
</script>

<style scoped>
.table-demo {
  padding: 20px;
}

.description {
  margin: 16px 0;
  color: #666;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.empty-content {
  padding: 32px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
}

.empty-text {
  margin: 16px 0;
  color: #909399;
}

.reload-btn {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.reload-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
</style>
